/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-09 17:01:28
 * @LastEditTime: 2023-08-31 16:33:18
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { ButtonProps, Flex, useColorMode } from '@chakra-ui/react';
import { IconMoonStars, IconSunHigh } from '@tabler/icons-react';

import IAIIconButton from './IAIIconButton';
export default function ColorModeToggle(props: typeof ButtonProps) {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Flex justifyContent="center" alignItems="center">
      <IAIIconButton
        variant="ghost"
        color="#666666"
        _hover={{
          bg: 'base.800',
          color: '#333333',
        }}
        _dark={{
          color: 'base.200',
          _hover: {
            color: 'base.200',
          },
        }}
        icon={colorMode === 'light' ? <IconMoonStars /> : <IconSunHigh />}
        maxW="40px"
        aria-label="Toggle Color Mode"
        onClick={() => {
          toggleColorMode();
        }}
        p="0"
        _focus={{ boxShadow: 'none' }}
        w="fit-content"
        {...props}
      />
    </Flex>
  );
}
